<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>DLNA控制器</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--第三方css-->
		<link rel="stylesheet" href="./css/mui.min.css">
		<link href="./css/mui.picker.css" rel="stylesheet" />
		<link href="./css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="./css/font-awesome.css"/>
		<link rel="stylesheet" type="text/css" href="./css/chimee-mobile-player.browser.css"/>
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="./css/app.css?v={randomstr}" />
		<script src="./js/vconsole.min.js"></script>
		<script>

        	var vConsole = new VConsole({
				disableLogScrolling: false,
				onReady: function() {
					vConsole.hideSwitch();
				},
			});
        	console.log('Hello world');
        	window.onerror = function (msg, url, lineNo, columnNo, error) {
				console.log('msg:', msg);
				console.log('url:', url);
				console.log('lineNo:', lineNo);
				console.log('columnNo:', columnNo);
				console.log('error:', error);
				return false;
			};
    	</script>
	</head>

	<body>
		<!--header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">DLNA控制器</h1>
		</header-->
		<!-- 底部菜单 -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#controller">
				<span class="mui-icon fa fa-keyboard-o"></span>
				<span class="mui-tab-label">控制器</span>
			</a>
			<a class="mui-tab-item" href="#playlist" id="buttonPlaylistMenu">
				<span class="mui-icon fa fa-file-movie-o"></span>
				<span class="mui-tab-label">播放列表</span>
			</a>
			<a class="mui-tab-item" href="#dlna-render">
				<span class="mui-icon fa fa-wifi"></span>
				<span class="mui-tab-label">DLNA设备</span>
			</a>
		</nav>
		<!-- 控制器页面 -->
		<div class="mui-content">
			<!-- 圆形进度条 -->
			<div id="controller" class="mui-control-content mui-active">
				<div class="mui-card">
					<div class="dlna-player-info">
						<div><i class="fa fa-podcast"></i><h6 id='playerStatus'></h6></div>
						<div><i class="fa fa-file-video-o"></i><h6 id='currentFileName'></h6></div>
					</div>
					<div id='circle-progress-wrapper' class="mui-row">
						<div id='circleProgress' class="mui-col-sm-12 mui-col-xs-12">
							<div class="mui-table-view-cell">
								<div class="circle-progress-content" style='height:300px;width:300px;margin:0 auto'></div>
							</div>
						</div>
						<div id='videoPlayer' class="mui-col-sm-12 mui-col-xs-12">
							<div class="mui-table-view-cell" id='local'>

							</div>
						</div>
						<div class="flex-container-1" style="margin-top:100px">
							<button id='stopVideo' type="button" class="mui-btn mui-btn-danger fa fa-stop-circle-o">
								停止播放
							</button>
							<button id='playLocal' type="button" class="mui-btn mui-btn-primary fa fa-play-circle-o">
								本机播放
							</button>
						</div>
					</div>
				</div>
				<div class="mui-card">
					<div class="mui-card-content" >
						<ul class="mui-table-view">
							<li class="mui-table-view-cell mui-collapse">
								<a class="fa fa-bars" style='font-size:1.5em;color:#999;display:inline' href="#"></a>
								<span id="timeInfo" style='font-size:0.9em;float:right;color:#999'>00:00:00/00:00:00</span>
								<div class='mui-collapse-content'>
									<div class="mui-col-sm-12 mui-col-xs-12">
										<div class="mui-table-view-cell" style='text-align: center;'>
											<p id="timeOffsetInfo"></p>
										</div>
									</div>
									<div style='width: 98%;'>
										<input id='progressBar' type = "range" name = "range" min = "0" max = "100" step = "1" value = "0" style="width:100%"/>
									</div>
									<div class="flex-container">
										<button class='timeSeekButton' id="btn-m-60" timeOffset='-60'>-60</button>
										<button class='timeSeekButton' id="btn-m-30" timeOffset='-30'>-30</button>
										<button class='timeSeekButton' id="btn-m-15" timeOffset='-15'>-15</button>
										<button class='timeSeekButton' id="btn-p-15" timeOffset='15'>+15</button>
										<button class='timeSeekButton' id="btn-p-30" timeOffset='30'>+30</button>
										<button class='timeSeekButton' id="btn-p-60" timeOffset='60'>+60</button>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="mui-card">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<span>屏幕常亮</span>
							<div id='light-handle' class="mui-switch">
								<div class="mui-switch-handle"></div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<span>显示调试</span>
							<div id='vConsoleToggle' class="mui-switch">
								<div class="mui-switch-handle"></div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div id="playlist"  class="mui-control-content">
				<div class="mui-card">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							<span class="playlist-name" id="playlist-name"></span>
							<button id='morePlaylist' class="mui-btn">
								<span class="mui-icon fa fa-ellipsis-h"></span>
							</button>
						</li>
					</ul>
				</div>

				<div class="mui-card">
					<ul id="video-file-list" class="mui-table-view">
						<!--li class="mui-table-view-cell">
							<span class="playlist-video-item-name">Item 1中文中文中文中文</span>
							<button type="button" class="mui-btn mui-btn-danger" style="width:35px;height:35px;border-radius: 30px;">
								<span class="mui-icon fa fa-stop"></span>
							</button>
						</li>
						<li class="mui-table-view-cell">
							<span class="playlist-video-item-name">Item 2中文中文中文中文</span>
							<button type="button" class="mui-btn mui-btn-primary" style="width:35px;height:35px;border-radius: 30px;">
								<span class="mui-icon fa fa-play"></span>
							</button>
						</li-->
					</ul>
				</div>
			</div>
			<div id="dlna-render" class="mui-control-content">
				<div class="mui-card">
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell mui-media">
							<div class="mui-table" style=''>
								<div class="mui-table-cell mui-col-xs-2">
									<span>
										<img class="mui-media-object mui-pull-left head-img" id="head-img" src="./images/logo.png">
									</span>
								</div>
							    <div class="mui-table-cell mui-col-xs-8 dlna-render-info" style=''>
							        <p>Kodi(sdfkxls-eekk)</p>
							        <p class="mui-ellipsis">192.168.1.1</p>
							    </div>
							    <div class="mui-table-cell mui-col-xs-2 mui-text-right dlna-render-radio" style='' >
									<div class="mui-input-row mui-radio mui-left " style=''  >
										<label style=''></label>
										<input name="radio" type="radio"  >
									</div>
							    </div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<!-- 播放列表页面 -->
		<div id="playlistSelector" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<!--li class="mui-table-view-cell"><a href="#" class='playlist-selector-item'>Item1</a></li-->
					</ul>
				</div>
			</div>

		</div>

		<script src="./js/mui.js"></script>
		<script src="./js/mui.view.js"></script>
		<script src="./js/mui.picker.js"></script>
		<script src="./js/mui.poppicker.js"></script>
		<script src="./js/circle-progress.js"></script>
		<script src="./js/NoSleep.min.js"></script>
		<script src="./js/chimee-mobile-player.browser.js"></script>
		<script>window.noZensmooth = true</script>
		<script src="./js/zenscroll-min.js"></script>
		<script src="./js/utils.js?v={randomstr}"></script>
		<script src="./js/app.js?v={randomstr}"></script>
	</body>

</html>